document.getElementById('next').onclick = function () {
    let lists = document.querySelectorAll('.item');
    document.getElementById('slide').appendChild(lists[0]);
}
document.getElementById('prev').onclick = function () {
    let lists = document.querySelectorAll('.item');
    document.getElementById('slide').prepend(lists[lists.length - 1]);
}

// Tab switching for the food area
document.addEventListener('DOMContentLoaded', function () {
    const links = document.querySelectorAll('.myfood .hd ul li a');
    const bds = document.querySelectorAll('.myfood .bd');

    links.forEach((link, index) => {
        link.addEventListener('mouseenter', () => {
            // Remove the bd_active class from all bds
            bds.forEach(bd => bd.classList.remove('bd_active'));
            // Add the bd_active class to the current bd
            bds[index].classList.add('bd_active');
            // Change the left navigation bar
            document.querySelector('.myfood .hd ul li .active').classList.remove('active');
            link.classList.add('active');
        });
    });
});